<template>
    <div class="excel-view-container">
        <vue-office-docx :src="item"  />
    </div>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'

export default {
    props: ['item'],
    components: {
        VueOfficeDocx
    },
    computed: {
        docxurl() {
            return window.location.origin + '/'
        }
    },
}
</script>
<style lang="less" scoped>
.vue-office-docx /deep/ .docx-wrapper {
    width: 99%;
    height: 100%;
    padding: 0px !important;
    display: flex;
    flex-flow: none !important;
    align-items: none !important;
    overflow:auto;
}

.docx {
	padding: 0px !important;
	min-height: 100% !important;
	column-count: 1;
	column-gap: 21.25pt;
    width: 100% !important;

	height: 100% !important;
}

.vue-office-docx,
.vue-office-docx-main {
    height: 100% !important;
}
.vue-office-docx /deep/ .vue-office-docx-main {
    height: 100% !important;
}
.excel-view-container {
    height: 200px;
}

.docx,
article {
    height: 100% !important;
    width: 100% !important;

}

p:nth-child(1) {
    height: 50px;
}

p:nth-child(2) {
    height: 150px;
    overflow: auto;

    span {
        display: inline-block;
        width: 100%;

    }
}
</style>